<#include "/common/include.html">
<@pageTheme mark="${config.optimize()?string('true', 'false')}">
<!DOCTYPE html>
<html>
<head>
    <#import "/common/springctx.ftl" as ctx>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>${config.getTitle()}</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="${ctxStatic}/statics/css/bootstrap.min.css?V=${config.getDvVersion()}">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="${ctxStatic}/statics/css/font-awesome.min.css?V=${config.getDvVersion()}">
  <!-- Ionicons -->
  <link rel="stylesheet" href="${ctxStatic}/statics/css/Ionicons/css/ionicons.min.css?V=${config.getDvVersion()}">
  <!-- Theme style -->
  <link rel="stylesheet" href="${ctxStatic}/statics/css/AdminLTE.min.css?V=${config.getDvVersion()}">
  <!-- iCheck -->
  <link rel="stylesheet" href="${ctxStatic}/statics/css/iCheck/all.css?V=${config.getDvVersion()}">
  <!-- jQuery toast 提示框  -->
  <link rel="stylesheet" href="${ctxStatic}/statics/css/jquery.toast.min.css?V=${config.getDvVersion()}">

  <link rel="stylesheet" href="${ctxStatic}/statics/css/index.css?V=${config.getDvVersion()}">
  <link rel="stylesheet" href="${ctxStatic}/statics/css/style.css?V=${config.getDvVersion()}">
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <!-- Google Font-->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"> 
  <#-- Vue单页面刷新闪烁标签{{}}问题解决-->
  <style>[v-cloak]{display:none !important;}
      .signinpanel {
          width:100%;
          margin:10% auto 0
      }
  </style>
</head>
<body class="hold-transition login-page">
<div class="row" id="app" v-cloak>
    <div class="col-xs-6">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
            <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img src="${ctxStatic}/statics/img/citydark.jpg" alt="First slide" height="200px">
                <div class="carousel-caption">
                    First Slide
                </div>
            </div>
            <div class="item">
                <img src="${ctxStatic}/statics/img/citydark.jpg" alt="Second slide" height="200px">

                <div class="carousel-caption">
                    Second Slide
                </div>
            </div>
            <div class="item">
                <img src="${ctxStatic}/statics/img/citynights.jpg" alt="Third slide" height="200px">

                <div class="carousel-caption">
                    Third Slide
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
            <span class="fa fa-angle-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
            <span class="fa fa-angle-right"></span>
        </a>
    </div>
    </div>
    <div class="col-xs-6">
        <div class="login-box">
            <div class="login-logo">
                <a href="#">${config.getTitle()}<small>V${config.getVersion()}</small></a>
            </div>
            <!-- /.login-logo -->
            <div class="login-box-body">
                <p class="login-box-msg"><@ctx.i18n text = "欢迎登录"/></p>
                <div class="form-group has-feedback">
                    <input type="text" class="form-control" v-model="username" placeholder="<@ctx.i18n text = "账号/邮箱/手机号码"/>">
                    <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <input type="password" class="form-control"  v-model="password" placeholder="<@ctx.i18n text = "密码"/>" @keyup.enter="login">
                    <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                </div>
                <div  v-if="loadcode" class="form-group has-feedback">
                    <input type="text" class="form-control"  v-model="captcha" placeholder="<@ctx.i18n text = "验证码"/>" @keyup.enter="login">
                    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
                </div>
                <div v-if="loadcode"  class="form-group has-feedback">
                    <img alt="<@ctx.i18n text = "如果看不清楚，请单击图片刷新!"/>" class="img-rounded" :src="src" @click="refreshCode">
                    &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" @click="refreshCode"><@ctx.i18n text = "点击刷新"/></a>
                </div>
                <div class="form-group row">
                    <div class="col-xs-6">
                        <div class="checkbox icheck">
                            <label>
                                <input type="checkbox" name="rememberUserCode"/><@ctx.i18n text = "记住账号"/>
                            </label>
                        </div>
                    </div>
                    <!-- /.col -->
                    <div class="col-xs-6">
                        <div class="checkbox icheck">
                            <label>
                                <input type="checkbox" name="rememberme" v-model="rememberme"> <@ctx.i18n text = "免登录"/>
                            </label>
                        </div>
                    </div>
                    <!-- /.col -->
                </div>
                <div class="form-group  row">
                    <div class="col-xs-12">
                        <button type="button" class="btn btn-primary btn-block btn-flat" @click="login" data-loading="正在验证登录，请稍后..."><@ctx.i18n text = "登录"/></button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <div class="dropdown pull-right">
                            <a href="javascript:" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
                                <i class="fa fa-language"></i>&nbsp;<@ctx.i18n text = "中文(简体)"/>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="mt5"></li>
                                <#list dict.getType('sys_lang_type')>
                                    <#items as d>
                                        <#if d.status =='0' >
                                            <li><a href="${ctxStatic}/login.html?_lang=${d.dictValue}">${d.dictLabel}</a></li>
                                        </#if>
                                    </#items>
                                </#list>
                                <li class="mt5"></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.login-box-body -->
        </div>
    </div>
</div>
  <!-- /.login-box-body -->
<!-- /.login-box -->
</div>
<div class="help-block text-center">
    <!-- Enter your password to retrieve your session -->
</div>
<div class="lockscreen-footer text-center">
    Copyright &copy; 2018-${config.getCopyrightYear()} <a href="http://www.lixinfintech.com" class="text-black">${config.getCompany()}</a><br>
        ${config.getIPC()}
</div>
<!-- jQuery 3 -->
<script src="${ctxStatic}/statics/libs/jquery.min.js?V=${config.getDvVersion()}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="${ctxStatic}/statics/libs/bootstrap.min.js?V=${config.getDvVersion()}"></script>
<!-- iCheck -->
<script src="${ctxStatic}/statics/libs/icheck.min.js?V=${config.getDvVersion()}"></script>
<script src="${ctxStatic}/statics/js/i18n/lixin_${config.getSysLang()}.js?V=${config.getDvVersion()}"></script>
<!-- 全局遮罩-->
<script type="text/javascript" src="${ctxStatic}/statics/plugins/blockUI/jquery.blockUI.js?V=${config.getDvVersion()}"></script>
<!-- jQuery toast 提示框  -->
<script src="${ctxStatic}/statics/libs/jquery.toast.min.js?V=${config.getDvVersion()}"></script>
<script src="${ctxStatic}/statics/libs/jquery.slimscroll.min.js?V=${config.getDvVersion()}"></script>
<script src="${ctxStatic}/statics/libs/fastclick.min.js?V=${config.getDvVersion()}"></script>
<script src="${ctxStatic}/statics/libs/app.js?V=${config.getDvVersion()}"></script>
<script src="${ctxStatic}/statics/libs/vue.min.js?V=${config.getDvVersion()}"></script>
<script>
  var ctx = "${ctxStatic}/";
  var vm = new Vue({
		el:'#app',
		data:{
			username: '',
			password: '',
			captcha: '',
			rememberme : false,
			loadcode : false,
			src: 'captcha.gif'
		},
		beforeCreate: function(){
			if(self != top){
				top.location.href = self.location.href;
			}
		},
		methods: {
			refreshCode: function(){
				this.src = ctx+"captcha.gif?t=" + $.now();
			},
			login: function (event) {
                $(window).block({ message: '<div class="loaderbox"><div class="loading-activity"></div> ' + lang.i18n['sys.login.loading'] + '</div>' });
				var data = "username="+vm.username+"&password="+
				vm.password+"&rememberMe="+vm.rememberme+"&captcha="+vm.captcha;
				$.ajax({
					type: "POST",
				    url: ctx+"sys/login",
				    data: data,
				    dataType: "json",
				    success: function(result){
						if(result.code == 0){
                            setTimeout(
                                function () {
                                    parent.location.href ='index.html';
                                }
                                , 100);
						}else if(result.code == '50004'){
                            $(window).unblock();
							vm.loadcode = true;
							vm.errrInfo(result.msg);
							vm.captcha = '';
							vm.password = '';
							vm.refreshCode();
						}
						else{
                            $(window).unblock();
							vm.errrInfo(result.msg);
							vm.captcha = '';
							vm.password = '';
							vm.refreshCode();
						}
					}
				});
			},
			errrInfo : function(text){
				$.toast({
					heading: '<@ctx.i18n text = "警告"/>',
					text: text,
					hideAfter:4000,
					position: 'bottom-right',
					stack: false,
					icon: 'error'
				})
			},
			remen:function(){
				
			}
		},
		mounted :function(){
			 $('input').iCheck({
				  checkboxClass: 'icheckbox_minimal-red',
				  radioClass: 'iradio_minimal-red',
				  increaseArea: '20%'
		     });
			
			 $('input').on('ifChanged', function(event){
				 if($(this).is(':checked')){
				 	 vm.rememberme = true;
				 }else{
					 vm.rememberme = false;
				 }
		     });
		}
	});
</script>
</body>
</html>
</@pageTheme>